import { useEffect, useState } from "react";
import { Link } from "react-router";
import { useAuth } from "./AuthContext";

export default function NavBar(){
    const [showMobileMenu, setShowMobileMenu] = useState(false)
    const {authInfo,logAction} = useAuth()


    
    return (
        <nav className="bg-blue-600 text-white p-4 sticky top-0 shadow-md">
        <div className="container mx-auto flex justify-between items-center">
            <div className="flex items-center space-x-4">
                <Link to="/" className="text-xl font-bold">EventApp</Link>
                <div id="nav-menu" className="hidden md:flex md:space-x-4">
                    <Link to="/" className="hover:underline">Home</Link>
                    <Link to="/categories" className="hover:underline">Category</Link>
                    <Link to="/events" className="hover:underline">Event</Link>
                    <Link to="/notifications" className="hover:underline">Notification</Link>
                </div>
            </div>


            <div className="flex items-center space-x-4">
                {authInfo?(
                    <>
                    <a href="notification.html" className="hover:text-gray-200" title="Notifications">
                    <i className="fas fa-bell text-xl"></i>
                </a>
                <span className="hidden md:inline">{authInfo.user.email}</span>
                <form action={logAction}><button  className="hidden md:inline hover:underline">Logout</button></form>
                <button id="nav-toggle" onClick={()=>{setShowMobileMenu(!showMobileMenu)}} className="md:hidden text-2xl focus:outline-none">☰</button>
                    </>
                ):(
                    <>
                        <Link to="/login" className="hidden md:inline hover:underline">Login</Link>
                        <a href="#" className="hidden md:inline hover:underline">&nbsp;Register</a>

                        <button  onClick={()=>{setShowMobileMenu(!showMobileMenu)}} className="md:hidden text-2xl focus:outline-none">☰</button>
                    </>
                )}
                
            </div>
        </div>
        <div id="mobile-menu" className={showMobileMenu?"":"hidden "+"md:hidden bg-blue-600 p-4"}>
            <Link onClick={()=>{setShowMobileMenu(!showMobileMenu)}} to="/" className="block py-2 hover:underline">Home</Link>
            <Link onClick={()=>{setShowMobileMenu(!showMobileMenu)}} to="/categories" className="block py-2 hover:underline">Category</Link>
            <Link onClick={()=>{setShowMobileMenu(!showMobileMenu)}} to="/events" className="block py-2 hover:underline">Event</Link>
            <Link onClick={()=>{setShowMobileMenu(!showMobileMenu)}} to="/notifications" className="block py-2 hover:underline">Notification</Link>
            {authInfo?(
                <>
                    <span className="block py-2">{authInfo.user.email}</span>
                    <form action={logAction}>
                        <button onClick={() => {
                            setShowMobileMenu(!showMobileMenu)
                        }} className="block py-2 hover:underline">Logout
                        </button>
                    </form>
                </>
            ) : (
                <>
                    <Link to="/login">Login</Link>
                    <span className="mx-2">/</span>
                    <Link to="/register">Register</Link>
                </>
            )}
        </div>
        </nav>
    )
}